<template>
  <div>
    <el-input style="width: calc(100% - 50px)"
              v-bind="$attrs"
              @input="handelInput"
              placeholder="请输入邮箱"></el-input>
    <el-switch :disabled="!$attrs.value"
               v-model="sendCertificateStatus"
               active-color="#13ce66"
               inactive-color="var(--prev-border-color-grey)"
               :active-value="1"
               :inactive-value="0"
               @change="handleConfirm">
    </el-switch>
  </div>
</template>

<script>
export default {
  name: "Email",
  data () {
    return {
      sendCertificateStatus: 0
    };
  },
  watch: {
    "$attrs.transform.sendCertificateStatus": {
      handler () {
        this.sendCertificateStatus = this.$attrs.value ? 1 : 0;
      },
      immediate: true
    }
  },
  methods: {
    handelInput (value) {
      this.$emit("input", value);
    },
    handleConfirm (value) {
      this.$emit("confirm", { sendCertificateStatus: value });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-switch__core {
  margin-left: 10px;
}
</style>
